@import '@/styles/variables.scss';

<template>
  <div class="page-container cases-container">
    <!-- Banner组件 -->
    <page-banner
      title="案例中心"
      description="探索我们的成功案例，了解我们如何帮助客户实现目标"
      background-image="/images/cases-banner.jpg"
      background-color="#2c5282"
    />
    
    <div class="cases-content">
      <!-- 筛选组件 -->
      <cases-filter @filter-change="handleFilterChange" />
      
      <!-- 案例列表组件 -->
      <cases-list ref="casesListRef" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CasesFilter from './components/CasesFilter.vue'
import CasesList from './components/CasesList.vue'
import PageBanner from '@/components/PageBanner.vue'

const casesListRef = ref(null)

// 处理筛选条件变化
const handleFilterChange = (filters) => {
  if (casesListRef.value) {
    casesListRef.value.handleFilterChange(filters)
  }
}
</script>

<style lang="scss" scoped>
.cases-container {
  padding: 0 0 80px;
  background: #f8f9fa;
  min-height: 100vh;

  .cases-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
}
</style>